<template>
  <div id="login">
    <vue-particles class="login-bg" :moveSpeed="1" :clickEffect="false" />
    <el-alert
      class="alert"
      title="角色信息"
      type="info"
      description="RoleA、RoleB、RoleC"
    />
    <TimePlay class="time-play" />
    <el-form :model="loginForm">
      <img class="logo" src="@/assets/logo.png" alt="" />
      <el-form-item>
        <el-input
          v-model="loginForm.username"
          prefix-icon="el-icon-user-solid"
          placeholder="用户名"
        ></el-input>
      </el-form-item>
      <el-form-item>
        <el-input
          type="password"
          v-model="loginForm.password"
          prefix-icon="el-icon-lock"
          placeholder="密码"
        ></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="handleLogin" :loading="loading">
          登录
        </el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import TimePlay from '@/components/TimePlay'
export default {
  components: {
    TimePlay
  },

  data() {
    return {
      loginForm: {
        username: 'RoleA',
        password: 'admin'
      },
      role: {
        RoleA: {
          token: 'token',
          userinfo: {
            role: 0,
            roleName: '集团业务管理员',
            username: 'RoleA',
            introduction: 'I Am RoleB!',
            avatar:
              'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg'
          }
        },
        RoleB: {
          token: 'token',
          userinfo: {
            role: 1,
            roleName: '河北省分公司 / 业务管理员',
            username: 'RoleB',
            introduction: 'I Am RoleB!',
            avatar:
              'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg'
          }
        },
        RoleC: {
          token: 'token',
          userinfo: {
            role: 1,
            roleName: '山东省分公司 / 业务管理员',
            username: 'RoleC',
            introduction: 'I Am RoleB!',
            avatar:
              'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg'
          }
        }
      },
      loading: false
    }
  },

  methods: {
    async handleLogin() {
      this.loading = true
      if (!this.role[this.loginForm.username]) {
        this.$message.error('登录失败，用户名或密码错误')
        this.loading = false
        return
      }
      await this.$store.dispatch(
        'user/login',
        this.role[this.loginForm.username]
      )
      setTimeout(() => {
        this.loading = false
        this.$router.push('/')
      }, 1000)
    }
  }
}
</script>

<style lang="scss" scoped>
#login {
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #2d3a4b;
  .alert {
    width: 200px;
    position: fixed;
    top: 10px;
    right: 10px;
  }
  .login-bg {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
  }

  .time-play {
    position: fixed;
    bottom: 0;
    right: 20px;
  }

  .el-form {
    text-align: center;
    margin-bottom: 100px;
    z-index: 999;
    .logo {
      width: 80px;
      height: 80px;
      margin-bottom: 20px;
    }
    .el-input {
      width: 400px;
      /deep/ .el-input__inner {
        padding-left: 40px !important;
      }
    }
    .el-button {
      width: 100%;
      float: right;
    }
  }
}
</style>
